<template>
  <view class="container">
    <u-cell-group>
      <u-cell title="历史数据曲线图" is-link @click="goChart" />
      <u-cell title="模拟量输入配置" is-link @click="goAnalogInput" />
      <u-cell title="模拟量自动化配置" is-link @click="goAnalogAuto" />
    </u-cell-group>

    <view class="gap" />

    <u-cell-group>
      <u-cell
        title="本地遥控功能"
        :value="localRemoteLabel"
        is-link
        @click="setLocalRemote"
      />
      <u-cell
        title="工作模式"
        :value="workModeLabel"
        is-link
        @click="setWorkMode"
      />
      <u-cell
        title="上电动作方式"
        :value="powerOnActionLabel"
        is-link
        @click="setPowerOnAction"
      />
      <u-cell title="IMEI" :value="imei" />
      <u-cell title="IMEI" :value="imei2" />
    </u-cell-group>

    <view class="guide-box">
      <view class="guide">
        <text class="li"
          >1、设定温湿度更新上报周期，单位是分钟，设定成功后，会显
示在设定控件左侧，范围是1~1440的整数。

2、数据更新功能
1）禁用数据更新：设备不会主动上报模拟量数据；
2）启用数据更新：设备按照设定的上报周期时间，主动上报模
拟量数据。</text
        >
       
      </view>
      <view class="period-row">
        <u-input v-model="updatePeriod" type="number" placeholder="分钟" />
        <view class="edit" @click="editUpdatePeriod">
          <u-icon name="edit-pen" size="20" color="#60a4f7" />
        </view>
      </view>
      <view class="btns">
        <u-button type="error" size="small" @click="disableUpdate"
          >禁用数据更新</u-button
        >
        <u-button type="primary" size="small" @click="enableUpdate"
          >启用数据更新</u-button
        >
      </view>
    </view>

    <u-action-sheet
      :show="actionSheet.show"
      :actions="actionSheet.actions"
      @close="actionSheet.show = false"
      @select="onActionSelect"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      localRemote: 'disable',
      workMode: "pulse",
      powerOnAction: "off",
      imei: "123456789000000",
      imei2: "123456789000000ADC123",
      updatePeriod: 1,
      actionSheet: {
        show: false,
        type: "",
        actions: [],
      },
    };
  },
  computed: {
    localRemoteLabel() {
      return this.localRemote === 'disable' ? '禁用遥控器' : '启用遥控器';
    },
    workModeLabel() {
      const map = { pulse: '点动', self_lock: '自锁', inter_lock: '互锁' };
      return map[this.workMode] || '';
    },
    powerOnActionLabel() {
      const map = { off: '关断', on: '打开', hold: '保持' };
      return map[this.powerOnAction] || '';
    },
  },
  methods: {
    goChart() {
      uni.navigateTo({ url: "/pages/index/historyChart/index" });
    },
    goAnalogInput() {
      uni.navigateTo({ url: "/pages/index/analogInput/index" });
    },
    goAnalogAuto() {
      uni.navigateTo({ url: "/pages/index/autoConfig/index" });
    },
    setLocalRemote() {
      this.actionSheet = {
        show: true,
        type: "localRemote",
        actions: [
          { name: "禁用遥控器", value: "disable" },
          { name: "启用遥控器", value: "enable" },
        ],
      };
    },
    setWorkMode() {
      this.actionSheet = {
        show: true,
        type: "workMode",
        actions: [
          { name: "点动", value: "pulse" },
          { name: "自锁", value: "self_lock" },
          { name: "互锁", value: "inter_lock" },
        ],
      };
    },
    setPowerOnAction() {
      this.actionSheet = {
        show: true,
        type: "powerOnAction",
        actions: [
          { name: "关断", value: "off" },
          { name: "打开", value: "on" },
          { name: "保持", value: "hold" },
        ],
      };
    },
    onActionSelect(e) {
      if (this.actionSheet.type === "workMode") this.workMode = e.value;
      if (this.actionSheet.type === "powerOnAction")
        this.powerOnAction = e.value;
      if (this.actionSheet.type === "localRemote") this.localRemote = e.value;
      this.actionSheet.show = false;
    },
    editUpdatePeriod() {
      uni.showToast({ title: "编辑周期占位", icon: "none" });
    },
    disableUpdate() {
      uni.showToast({ title: "已禁用数据更新", icon: "none" });
    },
    enableUpdate() {
      uni.showToast({ title: "已启用数据更新", icon: "none" });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  height: 100%;
  background: #f6f7fb;
  padding: 16rpx 30rpx 30rpx;
}
.page-header {
  padding: 8rpx 4rpx 12rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1e1f23;
}
.sub {
  display: block;
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #8b8d93;
}
.gap {
  height: 12rpx;
}

.guide-box {
  margin-top: 16rpx;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.guide {
  padding: 8rpx 0 12rpx;
}
.li {
  display: block;
  color: #5f6169;
  font-size: 22rpx;
  line-height: 1.6;
}
.period-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin: 10rpx 0 16rpx;
}
.edit {
  width: 60rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #e6e8f0;
  border-radius: 8rpx;
}
.btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}
</style>
